<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>DataTable with Expandable Rows</title>
	
	<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
	<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
	<link type="text/css" rel="stylesheet" href="../../build/logger/assets/skins/sam/logger.css">
	<link rel="stylesheet" type="text/css" href="../../build/yuitest/assets/skins/sam/yuitest.css" />
	<style>
		body{ text-align: left; }
		.yui-log{
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
		}
		.yui-dt-expanded .yui-dt-expandablerow-trigger{
			width:18px;
			height:22px;
			cursor:pointer;
			background:url(arrow_open.png) 4px 4px no-repeat;
		}
		.yui-dt-expandablerow-trigger, .yui-dt-collapsed .yui-dt-expandablerow-trigger{
			width:18px;
			height:22px;
			cursor:pointer;
			background:url(arrow_closed.png) 4px 4px no-repeat;
		}
	</style>

</head>

<body class=" yui-skin-sam">

<h1>DataTable with Row Expansion</h1>

<div class="exampleIntro">
	<p>A demonstration of the DataTable's row expansion feature. This is a list of Interestingness from Flickr</p>

</div>

<div id="event_table"></div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script> 
<script type="text/javascript" src="../../build/dom/dom.js"></script> 
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/element/element.js"></script> 
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/yuitest/yuitest-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="rowexpansion.js"></script>

<script>

YAHOO.util.Event.onDOMReady( function() {
		YAHOO.example.Basic = function() {

				var expansionFormatter = function(el, oRecord, oColumn, oData) {

					var	cell_element = el.parentNode;

					//Set trigger
					if( oData ){ //Row is closed

						YAHOO.util.Dom.addClass( cell_element, "yui-dt-expandablerow-trigger" );

					}

				};

				var myDataSource = new YAHOO.util.DataSource(YAHOO.example.interestingness);
						myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
						myDataSource.responseSchema = {
							fields: ["title","farm","server","id","secret","owner"]
						};

				var myDataTable = new YAHOO.widget.DataTable(
						"event_table",
						[
							{
								key:"farm",
								label:"",
								formatter:expansionFormatter
							},
							{
								key:"title",
								label:"Interestingness",
								width : '200px',
								resizeable:true,
								sortable:true
							}
						],
						myDataSource,
							{ rowExpansionTemplate : '<img src="http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_m_d.jpg" />' }
						);

				//Subscribe to a click event to bind to
				myDataTable.subscribe( 'cellClickEvent', myDataTable.onEventToggleRowExpansion );
				
				return {
						oDS: myDataSource,
						oDT: myDataTable
				};
		}();
});

</script>
<!--script type="text/javascript" src="test_rowexpansion.js"></script-->

</body>
</html>